import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
import { useArgs } from '@storybook/client-api';
import { Select } from '@zendeskgarden/react-forms';
import { SelectStory } from './stories/SelectStory';
import { SELECT_OPTIONS as OPTIONS } from './stories/data';
import { commonArgs, commonArgTypes, fieldSubcomponents } from './stories/common';
import README from '../README.md';

<Meta
  title="Packages/Forms/Select"
  component={Select}
  subcomponents={{ ...fieldSubcomponents }}
  args={{
    options: OPTIONS,
    ...commonArgs
  }}
  argTypes={{
    /* ensures the `validation` story arg for the `Select` component is not overriden */
    ...{ ...commonArgTypes, validation: {} },
    options: { name: 'children' },
    disabled: { control: 'boolean' }
  }}
/>

# API

<ArgsTable />

# Demo

## Uncontrolled

<Canvas>
  <Story name="Uncontrolled">{args => <SelectStory {...args} />}</Story>
</Canvas>

## Controlled

<Canvas>
  <Story name="Controlled" args={{ value: OPTIONS.length - 1 }}>
    {args => {
      const updateArgs = useArgs()[1];
      const handleChange = event => updateArgs({ value: event.target.value });
      return <SelectStory {...args} onChange={handleChange} />;
    }}
  </Story>
</Canvas>

<Markdown>{README}</Markdown>
